<template>
    <el-dialog v-model="openModMenu" :title="props.type=='add'?'添加菜单':'修改菜单'" @close="close" style="width: 30%">
            <el-form ref="dataForm" :rules="rules" :model="form" label-width="100px" align="center">
                <el-form-item label="菜单名" prop="name">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="路径" prop="path">
                    <el-input v-model="form.path" />
                </el-form-item>

                <el-form-item label="组件名" v-show='form.nodeType==2'>
                    <el-input v-model="form.viewName" />
                </el-form-item>

                <el-form-item label="图标" v-show='form.nodeType!==3'>
                    <el-dropdown trigger="click" max-height="200px">
                        <span class="el-dropdown-link">
                           <el-icon size="20px" v-if="form.icon"><component :is="form.icon"></component></el-icon>
                            <span v-else>选择图标</span>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item v-for="item in icons" @click="selectIcon(item)">
                                    <el-icon size="20px"><component :is="item"></component></el-icon>{{item}}
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </el-form-item>

                <div v-show='props.type=="add"'>
                    <el-form-item label="菜单类型">
                        <el-radio-group v-model="form.nodeType">
                            <el-radio :label="1">菜单组</el-radio>
                            <el-radio :label="2">菜单页</el-radio>
                            <el-radio :label="3">按钮</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="父节点">
                        <el-input v-model="form.parentName" />
                    </el-form-item>
                    <el-form-item  label="选择父节点">
                        <el-tree style="width: 200px"
                                :data="parentTree"
                                :props="defaultProps"
                                accordion
                                @node-click="handleNodeClick"
                        />
                    </el-form-item>
                </div>
                <el-form-item>
                    <el-button v-show='props.type=="add"' type="primary"  plain @click="addMunu">添加</el-button>
                    <el-button v-show='props.type=="add"' type="primary"  plain @click="reset">重置</el-button>
                    <el-button v-show="props.type=='update'" type="primary"  plain  @click="updateMunu">更新</el-button>
                    <el-button @click="close" type="primary" plain  >取消</el-button>
                </el-form-item>
            </el-form>
    </el-dialog>
</template>

<script setup>
    import {ref,reactive,onBeforeUpdate,onUpdated} from 'vue'
    import request from '@/utils/request.js'
    import { ElMessage } from 'element-plus'
    const  emits = defineEmits(['close','reload'])
    const icons = ref(['Setting','Document','Bell','PieChart','Stopwatch','Notebook','ShoppingCart',
        'Goods','CreditCard','Money','User','Filter','EditPen','Headset','Box','Mouse','Magnet','Coin',
        'Trophy','Timer','Picture','SetUp','Operation','Connection','Discount','Position'])
    let dataForm = ref(null)
    let props = defineProps(['type','id'])
    let openModMenu = ref(false)
    let form = reactive({})
    const rules = reactive({
        name: [{ required: true, message: '请输入菜单名', trigger: 'blur' },],
        path: [{required: true,message: '请输入路径', trigger: 'blur'},],
    })
    const defaultProps = {
        children: 'children',
        label: 'name',
        id:"id"
    }
    let parentTree = reactive([])

    onBeforeUpdate(function () {
        if(openModMenu.value == true){
            if(props.type=='update'){
                request.get(`/api/menu/getMenu/${props.id}`).then(resp => {
                    for(let key in resp){
                         form[key] = resp[key]
                    }
                })
            }else if(props.type=="add"){
                for(let key in form){
                    delete form[key]
                }
             }
        request.get(`/api/menu/getParentMenus`).then(resp => {
            parentTree.splice(0,parentTree.length)
            parentTree.push(...resp)
        })
        }
    })

    function close(){
        openModMenu.value = false
        dataForm.value.resetFields()//重置表单校验
    }
    function reset(){
        for(let key in form){
            delete form[key]
        }
    }

    function addMunu(){
        dataForm.value.validate((valid, fields)=> {
            if (valid) {
                request.post("/api/menu/add", form).then(resp => {
                    emits("reload")
                    openModMenu.value = false
                    ElMessage({message: '添加成功！',type: 'success'})
                })

            }else{
                ElMessage({message: '缺少必填项！',type: 'error'})
            }
        })
    }
    function updateMunu(){
        dataForm.value.validate((valid, fields) => {
            if (valid) {
                request.post("/api/menu/update", form).then(resp => {
                    emits("reload")
                    openModMenu.value = false
                    ElMessage({message: '修改成功！',type: 'success'})
                })
            }else{
                ElMessage({message: '缺少必填项！',type: 'error'})
            }
        })
    }

    function handleNodeClick (node){
        form.parentId = node.id
        form.parentName = node.name
        form.parentFullId= node.parentFullId+node.id
    }
    function selectIcon (iconName){
        form.icon = iconName
    }

    defineExpose({openModMenu})
</script>

<style scoped>

</style>